<template>
	<view class="uni_box home">
		<navbar title='物流详情'>
		</navbar>
		<view class="content">
			<view class="dinview">
				<view class="dhead">
					<image src="@/pages_client/static/mine/icon_dd_ysz_s.png" class="transport"/>
					<text class="tzhuang">{{ order.com_status }}</text>
				</view>
				<view class="dhead">
					<text class="chengyun">物流公司：</text>
					<text class="neirong">{{order.com_name}}</text>
				</view>
				<!-- <view class="dhead">
					<text class="chengyun">承运人电话：</text>
					<text class="neirong phone">95388</text>
				</view> -->
				<view class="dhead">
					<text class="chengyun">运单号：</text>
					<text class="neirong">{{order.com_code}}</text>
					<text class="fuzhi" @click="copy(order.com_code)">复制</text>
				</view>
				<!-- <view class="dhead">
					<text class="chengyun">描述：</text>
					<text class="neirong">8888</text>
				</view> -->
			</view>
			<view class="dinnav">
				<!-- <view class="wuitem" v-for="(item,index) in logistics" :key="index">
					
					<view class="leftimg" v-if="item.status_name == '已签收' ">
						<image src="/static/transport.png" class="transportimg"/>
					</view>
					<view class="leftyuan" v-else></view>
					<view class="itemcont">
						<text class="name">{{ getordername(item.status_name) }}</text>
						<text class="dizhi mt">{{item.content}}</text>
						<text class="val mt">{{item.time_date}}</text>
					</view>
				</view> -->
				<view class="wuitem" v-for="(item,index) in list" :key="index">
					<view class="leftyuan"></view>
					<view class="itemcont">
						<text class="name">{{item.status}}</text>
						<text class="dizhi mt" v-if="item.areaName">{{item.areaName}}</text>
						<text class="val mt">{{item.ftime}}</text>
						<text class="val mt">{{item.context}}</text>
					</view>
				</view>
				<!-- <view class="wuitem">
					<view class="leftyuan"></view>
					<view class="itemcont">
						<text class="name">运输中</text>
						<text class="dizhi mt">【昆明市】快件已发车</text>
						<text class="val mt">2023-06-23 15:58:36</text>
						<text class="val mt">【昆明市】快件在【昆明贡花香满径速运营业点】完成分拣，准备发往【昆明呈贡集散点（鲜花）】【昆明呈贡集散点（鲜花）】</text>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				order:{},
				list:[]
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getDetail()
			
		},
		computed: {
			title(){
				return this.$t('i.dingenzong')
			},
		},
		onShow() {
		},
		methods: {
			async getDetail(){
				let res = await this.$u.api.kuaidi({
					order_id:this.id
				})
				this.list = res.list
				this.order = res.info
			},
			getordername(e){
				let name = e
				
				if(e == '运输中'){
					name = 'In transit'
				}else if(e == '发货'){
					name = 'send out goods'
				}else if(e == '已签收'){
					name = 'Signed for'
				}
				return name

			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f8f8f8;
	}
	.content{
		background-color: #f8f8f8;
		.dinview{
			display: flex;
			flex-direction: column;
			padding: 35rpx;
			background-color: #fff;
			border-radius: 0 0 25rpx 25rpx;
		}
		.dhead{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 30rpx;
			.transport{
				width: 46rpx;
				height: 46rpx;
				margin-right: 15rpx;
			}
			.tzhuang{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #222222;
			}
			.chengyun{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
			}
			.neirong{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #222222;
			}
			.phone{
				font-weight: bold;
				color: #60A3F4;
			}
			.fuzhi{
				background: #F2F2F2;
				border-radius: 5rpx;
				padding: 5rpx 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
				display: flex;
				margin-left: 30rpx;
				align-items: center;
				justify-content: center;
			}
		}

		.dinnav{
			display: flex;
			flex-direction: column;
			margin-top: 40rpx;
			background-color: #fff;
			padding: 50rpx 30rpx;
			.wuitem{
				min-height: 200rpx;
				border-left: 2rpx solid #E2E3E8;
				padding-left:50rpx;
				position: relative;
				padding-bottom: 20rpx;
				.leftyuan{
					width: 12rpx;
					height: 12rpx;
					background: #DADADA;
					border-radius: 50%;
					position: absolute;
					left: -6rpx;
					top: -6rpx;

				}
				.leftimg{
					width: 46rpx;
					height: 46rpx;
					position: absolute;
					left: -23rpx;
					top: -23rpx;
					.transportimg{
						width: 100%;
						height: 100%;
					}
				}
				.itemcont{
					display: flex;
					width: 100%;
					height: 100%;
					flex-direction: column;
					.mt{
						display: inline-block;
						margin: 5rpx 0;
					}
					.name{
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #222222;
					}
					.dizhi{
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #222222;
					}
					.val{
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #7D7D7D;
					}
				}
			}
			.wuitem:last-child{
				border-left: none;
			}
		}
	}
</style>
